<template>
	<view class="container">
		<!-- 固定的标题编辑区 -->
		<view class="fixed-content">
			<view class="section-title">创建你的动态信息</view>
			<view class="title-input">
				<textarea v-model="formData.content" placeholder="请输入标题描述..." maxlength="40" :show-confirm-bar="false"
					auto-height />
				<text class="title-count"
					:class="{'title-count-warning': formData.content.length > 25}">{{formData.content.length}}/30</text>
			</view>
		</view>

		<!-- 可滚动的内容区 -->
		<scroll-view class="scroll-content" scroll-y>
			<!-- 图片上传区 -->
			<view class="upload-section">
				<view class="upload-box" v-if="!formData.image" @click="chooseImage">
					<uni-icons type="camera-filled" size="40" color="#FF4785"></uni-icons>
					<text class="upload-text">上传动态图片</text>
					<text class="upload-tip">高质量图片更容易获得关注</text>
				</view>
				<view class="image-preview" v-else>
					<image :src="formData.image" mode="aspectFill"></image>
					<view class="delete-btn" @click="deleteImage">
						<uni-icons type="closeempty" size="20" color="#fff"></uni-icons>
					</view>
					<view class="image-overlay">
						<view class="change-image-btn" @click.stop="chooseImage">
							<uni-icons type="reload" size="16" color="#fff"></uni-icons>
							<text>更换</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 提示信息 -->
			<view class="tips-section">
				<view class="tip-item">
					<uni-icons type="info-filled" size="16" color="#8A8DFF"></uni-icons>
					<text>添加清晰的动态图片和描述，让买家一目了然</text>
				</view>
			</view>
		</scroll-view>

		<!-- 底部发布按钮 -->
		<view class="bottom-bar">
			<button class="publish-button" :class="{ active: canPublish }" :disabled="!canPublish"
				@click="publishArticle">
				<text>发布动态</text>
				<uni-icons v-if="canPublish" type="arrow-right" size="16" color="#fff"></uni-icons>
			</button>
		</view>
	</view>
</template>

<script>
	import {
		setpostsList,
		uploadUrl
	} from "@/request/API.js"
	import pageMetaVue from '../../compents/page-meta/page-meta.vue'
	export default {
		data() {
			return {
				statusBarHeight: 0,
				formData: {
					content: '',
					image: ''
				}
			}
		},
		components: {
			pageMetaVue
		},
		computed: {
			canPublish() {
				// 
				return this.formData.content.trim() && this.formData.image
			}
		},
		created() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
		},
		methods: {
			goBack() {
				if (this.formData.content || this.formData.image) {
					uni.showModal({
						title: '提示',
						content: '是否放弃编辑？',
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: "/pages/index/index"
								})
							}
						}
					})
				} else {
					uni.navigateTo({
						url: "/pages/index/index"
					})
				}
			},
			chooseImage() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						uni.uploadFile({
							url: uploadUrl, // 后端接口地址
							filePath: res.tempFilePaths[0], //选取图片
							name: 'file', //文件名称可以自定义
							success: ({
								data
							}) => {
								let list = JSON.parse(data);
								if (list.code == 200) {
									this.formData.image = list.data;
								}
							}
						});
					}
				})
			},
			deleteImage() {
				this.formData.image = ''
			},
			async publishArticle() {
				let id = uni.getStorageSync("userId");
				if (!id) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
					return
				}
				if (!this.canPublish) {
					uni.showToast({
						title: '请填写完整内容',
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					title: '发布中...'
				})
				this.formData.userId = id;
				let res = await setpostsList(this.formData);
				if (res.code == 200) {
					setTimeout(() => {
						uni.hideLoading()
						uni.showToast({
							title: '发布成功',
							icon: 'success',
							duration: 2000,
							success: () => {
								setTimeout(() => {
									uni.navigateTo({
										url: "/pages/index/index"
									})
								}, 2000)
							}
						})
					}, 1500)
				}
			}
		}
	}
</script>

<style>
	.container {
		min-height: 100vh;
		background-color: #f8f9fa;
		display: flex;
		flex-direction: column;
		padding-bottom: 140rpx;
	}

	.nav-bar {
		background: #fff;
		border-bottom: 1px solid #f0f0f0;
		position: sticky;
		top: 0;
		z-index: 100;
		flex-shrink: 0;
	}

	.nav-content {
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 16rpx;
	}

	.left-icon,
	.right-icon {
		width: 44px;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.nav-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
	}

	.fixed-content {
		padding: 40rpx 30rpx 20rpx;
		background: #fff;
		flex-shrink: 0;
		z-index: 99;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		border-radius: 0 0 24rpx 24rpx;
	}

	.section-title {
		font-size: 36rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 30rpx;
	}

	.scroll-content {
		flex: 1;
		padding: 30rpx;
		height: 0;
	}

	.title-input {
		position: relative;
		margin-bottom: 40rpx;
		background-color: #f6f7f9;
		border-radius: 16rpx;
		padding: 24rpx;
		box-shadow: inset 0 2rpx 6rpx rgba(0, 0, 0, 0.03);
		transition: all 0.3s;
	}

	.title-input:focus-within {
		background-color: #fff;
		box-shadow: 0 0 0 2rpx rgba(255, 71, 133, 0.2), inset 0 2rpx 6rpx rgba(0, 0, 0, 0.03);
	}

	.title-input textarea {
		width: 100%;
		min-height: 120rpx;
		font-size: 32rpx;
		color: #333;
		line-height: 1.6;
		padding-right: 80rpx;
	}

	.title-count {
		position: absolute;
		right: 20rpx;
		bottom: 20rpx;
		font-size: 24rpx;
		color: #999;
		padding: 6rpx 10rpx;
		border-radius: 20rpx;
		background: rgba(255, 255, 255, 0.6);
	}

	.title-count-warning {
		color: #ff4785;
	}

	.upload-section {
		padding: 30rpx 0;
		display: flex;
		justify-content: center;
	}

	.upload-box {
		width: 460rpx;
		height: 460rpx;
		background: #fff;
		border-radius: 16rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.05);
		border: 2rpx dashed #ddd;
		transition: all 0.3s;
	}

	.upload-box:active {
		transform: scale(0.98);
		background-color: #fafafa;
	}

	.upload-text {
		font-size: 32rpx;
		color: #333;
		margin-top: 24rpx;
		font-weight: 500;
	}

	.upload-tip {
		font-size: 24rpx;
		color: #888;
		margin-top: 12rpx;
	}

	.image-preview {
		position: relative;
		width: 460rpx;
		height: 460rpx;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1);
	}

	.image-preview image {
		width: 100%;
		height: 100%;
	}

	.delete-btn {
		position: absolute;
		top: 16rpx;
		right: 16rpx;
		width: 50rpx;
		height: 50rpx;
		background: rgba(0, 0, 0, 0.6);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 11;
		transition: all 0.2s;
	}

	.delete-btn:active {
		transform: scale(0.9);
	}

	.image-overlay {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx;
		background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
		display: flex;
		justify-content: center;
		z-index: 10;
	}

	.change-image-btn {
		display: flex;
		align-items: center;
		padding: 10rpx 24rpx;
		background: rgba(255, 255, 255, 0.25);
		border-radius: 30rpx;
	}

	.change-image-btn text {
		color: #fff;
		font-size: 24rpx;
		margin-left: 6rpx;
	}

	.tips-section {
		margin-top: 40rpx;
		padding: 30rpx;
		background: #fff;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.03);
	}

	.tip-item {
		display: flex;
		align-items: flex-start;
	}

	.tip-item text {
		font-size: 26rpx;
		color: #666;
		line-height: 1.5;
		margin-left: 10rpx;
		flex: 1;
	}

	.bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 24rpx 30rpx calc(24rpx + env(safe-area-inset-bottom));
		background: #fff;
		box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.08);
		z-index: 100;
	}

	.publish-button {
		width: 100%;
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		color: #fff;
		background: linear-gradient(to right, #ff6b9a, #ff4785);
		border-radius: 45rpx;
		opacity: 0.5;
		transition: all 0.3s;
		font-weight: 500;
	}

	.publish-button text {
		margin-right: 10rpx;
	}

	.publish-button.active {
		opacity: 1;
		box-shadow: 0 6rpx 16rpx rgba(255, 71, 133, 0.3);
	}

	.publish-button:active {
		transform: scale(0.98);
	}
</style>